<style lang="scss" scoped>

@import 'src/style/mixin';
.orderContainer {
    padding-top: 1.95rem;
    padding-bottom: 3rem;
    p,
    span {
        font-family: Helvetica Neue, Tahoma, Arial;
    }
}
.order_list {
    background-color: #fff;
    margin-top: .4rem;
    header {
        padding: .7rem;
        border-bottom: 0.025rem solid #f5f5f5;
        img {
            @include wh(1.2rem, 1.2rem);
            vertical-align: middle;
        }
        span {
          @include sc(.8rem, #333);


        }
    }
    .addFoods{
      a{
        background-color: #4cd964;
        font-size: .7rem;
        color: #fff;
        text-align: center;
        margin: 0 .7rem;
        line-height: 0.8rem;
        border-radius: .2rem;
        margin-top: .5rem;
        font-weight: 700;
        padding: 0.2rem 0.5rem;
        display:inline-block;
      }
    }
}
.food_list_ul {
    padding-top: .5rem;
}
.food_item{
  border-bottom: 0.025rem solid #f5f5f5;
}
.food_item_style {
    @include fj;
    line-height: 1.8rem;
    padding: 0 .7rem;
    span,
    p {
        @include sc(.65rem, #666);
    }
    .food_name {
        width: 5rem;
    }
    .num_price {
        flex: 1;
        // @include fj;
        align-items: center;
        span:nth-of-type(1) {
            color: #f60;
        }
    }
    .food-back{
      font-size: .5rem;
      color: #fff;
      background-color: #3190e8;
      width: 2.4rem;
      margin-top: .5rem;
      text-align: center;
      border-radius: .12rem;
      padding: .2rem;
    }
}
.shop-info{
  flex: 1;
  @include fj;
  align-items: center;
  span:nth-of-type(2) {
      @include sc(0.7rem,#f60);
  }
}
.food_item_taste{
  @include sc(.5rem, #333);
  padding: 0 0.7rem 0.6rem;
  .taste-t{
      @include sc(0.5rem, #c00);
  }
}


</style>

<template lang="html">

<div class="orderContainer">
    <head-top :head-title="headTitle"></head-top>
    <section class="order_list">
        <header class="shop-info">
            <span>{{shopId}}号桌</span>
            <span class="totalMoney">总价：¥{{totalMoney}}元</span>
            <span class="addFoods" ><router-link :to="'/shop/'+shopId+'?status=add'">加餐</router-link></span>
        </header>
        <section>
          <ul class="food_list_ul">
              <li v-for="(item,index) in orderFoodList" :key="item.id" class="food_item">
                  <div class="food_item_style">
                    <p class="food_name ellipsis">{{item.foodName}}</p>
                    <div class="num_price">
                        <span>x {{item.num}}</span>
                        <span>¥{{item.price}}</span>
                    </div>
                    <div class="">
                      <span v-if="item.foodStatus==null">上菜中&nbsp;&nbsp;<span @click="foodBack(item)" class="food-back">{{item.foodStatus | formatFoodStatus}}</span></span>
                      <span v-else>{{item.foodStatus | formatFoodStatus}}</span>

                    </div>
                  </div>
                  <div class="food_item_taste">
                    <span class="taste-t">口味：</span ><span>{{item.foodTaste}}、</span>
                  </div>

              </li>
          </ul>
        </section>
    </section>
    <transition name="router-slid" mode="out-in">
        <router-view></router-view>
    </transition>
</div>

</template>

<script>
import Vue from 'vue'
import qs from 'qs'

Vue.filter( 'formatFoodStatus' , (val)=>{
  let res = ''
  if(val ==null){
    res = '退菜'
  }else if(val =='2'){
    res = '已上菜'
  }
  return res
});

import headTop from '../../components/header/head'
export default {
    components: {
        headTop
    },
    data() {
        return {
            shopId: null, //桌号
            headTitle:'',
            totalMoney:'',
            orderFoodList:[]
        }
    },
    computed: {

    },
    created() {
        //获取上个页面传递过来的shopid值
        this.shopId = this.$route.query.shopId
        this.headTitle = this.$route.query.shopId + '号餐桌订单'
    },
    mounted() {
      this.mealOrderFoodList()
    },
    methods: {
        mealOrderFoodList(){
          var datas = {
                  "deskShopId": this.shopId
                }
                this.$http.post(this.HttpUrl.UrlConfig.mealOrderFoodList, qs.stringify(datas))
                    .then(res => {
                        res = res.data
                        this.totalMoney = res.mealOrderList[0].totalMoney
                        this.orderFoodList = res.mealOrderFoodPojos
                    }).catch(error => {
                        console.log(error)
                    })
        },
        // 退菜
        foodBack(item){
          let datas = {
            "desk_shop_id":this.shopId,
            "person_num":'',
            "total_money":item.price,
            "user_id":'',
            "dis_count_money":item.price,
            "pay_type":'',
            "real_money":item.price,
            "extra":'',
            "mealOrderFoods":JSON.stringify([{
              "food_id":item.foodId,
              "num":item.num,
              "food_taste":item.foodTaste,
              "remark":''
            }]),
            "type":'del'//new确认菜单，add加菜，del减菜
          }

                this.$http.post(this.HttpUrl.UrlConfig.updateMealOrderByDeskId, qs.stringify(datas))
                    .then(res => {
                        res = res.data

                        this.mealOrderFoodList()

                    }).catch(error => {
                        console.log(error)
                    })




        }
    }
}

</script>
